<template>
	<view>
		<navbar title="消息列表" :back="true" style="font-size: 30rpx;" />
		<u-tabs :list="tab" :is-scroll="false" :current="current" @click="change"></u-tabs>
		<view class="">
			<view v-for="(item,index) in list" :key="index"
				class="u-flex u-row-between bill-item p-20 u-border-bottom" @tap="goDetail(item.id)">
				<view>
					<view>{{item.title}}</view>
					<view>{{item.addTime}}</view>
				</view>
				
			</view>
			<loading  :loading="loading" :loadend="loadend" />
		</view>
	</view>

</template>

<script>
	import loading from "@/components/loading.vue"
	import navbar from '@/components/baseNavbar.vue'
	import {
		getInfoList
	} from '@/api/userInfo'
	export default {
		components: {
			loading,
			navbar
		},
		data() {
			return {
				tab: [
					{
						name: '未读',
						statue: 0
					},
					{
						name: '已读',
						statue: 1
					}

				],
				current: 0,
				page: {
					page: 1,
					limit: 20,
					statue:0
				},
				list: [],
				loading: false,
				loadend: false,
			}
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
					url:"/pages/sub/user/infoDetail?id="+id
				})
			},
			getList() {
				this.loading = true
				getInfoList(this.page).then(res => {
					this.page.page++
					this.list = this.list.concat(res.data.list)
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
				}).catch(err => {
					this.loading = false
					this.loadend = true
				})
			},
			change(item) {
				let index = item.index
				this.current = index;
				this.page.page = 1;
				this.list = []
				this.loadend = false;
				this.loading = false;
				this.page.statue = this.tab[index].statue
				this.getList()
			},
			
		},
		onLoad(option) {
			if (option.cateId) {
				this.page.cateId = option.cateId				
			}
			
		},	
		onShow() {
			this.change({index:this.current})
		},
		onReachBottom() {
		
			if (!this.loadend && !this.loading)
				this.getList()
		
		}
	}
</script>

<style scoped lang="scss">
	.numColor {
		color: $base-color;
	}
</style>
